<template>
  <van-nav-bar title="商品评价" left-text="" left-arrow @click-left="goBack" />
  <section class="aui-flexView">
    <!-- 订单详细 -->
    <section class="aui-scrollView">
      <!-- 订单状态 -->
      <div class="aui-pay-change">
        <div class="aui-flex">
          <div class="aui-flex-box">
            <h3>{{ detail.status_text }}</h3>
          </div>
          <div class="aui-pay-zfb">
            <img src="/assets/images/icon-zfb.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 订单商品 -->
      <div class="aui-commodity-bg">
        <div class="item">
          <div class="aui-flex">
            <div class="aui-commodity-img">
              <img :src="detail.product.thumbs_text" />
            </div>
            <div class="aui-flex-box">
              <h4 class="van-ellipsis">商品名称：{{ detail.product.name }}</h4>
              <p>商品单价：￥{{ detail.price }}</p>
              <span class="aui-barter-time">七天退换</span>
            </div>
            <div>
              <h5>￥{{ detail.total }}</h5>
              <p class="aui-sml-text">X{{ detail.pronum }}</p>
            </div>
          </div>

          <!-- 评价信息 -->
          <div style="padding: 15px">
            <van-form @submit="onSubmit">
              <van-field
                name="rate"
                label=""
                :rules="[{ required: true, message: '评分不能为空' }]"
              >
                <template #input>
                  <van-rate
                    v-model="detail.rate"
                    icon="fire"
                    void-icon="fire-o"
                  />
                </template>
              </van-field>
              <van-field
                v-model="detail.comment"
                rows="2"
                autosize
                label=""
                type="textarea"
                maxlength="120"
                placeholder="请输入评价内容"
                show-word-limit
              />
              <van-field name="uploader" label="">
                <template #input>
                  <van-uploader v-model="fileList" :max-count="5" multiple />
                </template>
              </van-field>
              <div style="margin: 16px">
                <van-button round block type="success" native-type="submit">
                  提交
                </van-button>
              </div>
            </van-form>
          </div>
        </div>
      </div>
    </section>
  </section>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.go(-1) }
const LoginUser = reactive(proxy.$cookies.get("LoginUser"))
const orderpid = ref(proxy.$route.query.orderpid ?? 0)
const fileList = ref([]);
const detail = ref({
  product: {}
})

onBeforeMount(() => {
  getRateinfoData()
})
const getRateinfoData = async () => {
  let result = await Api.OrderRateinfo({ busid: LoginUser.id, orderpid: orderpid.value })
  if (result.code == 1) {
    detail.value = result.data;
    console.log(detail.value);
  }
}

const onSubmit = async (values) => {
  console.log(values);
  var RequestData = new FormData()
  RequestData.append('busid', LoginUser.id)
  RequestData.append('orderpid', orderpid.value)
  RequestData.append('rate', detail.value.rate)
  RequestData.append('comment', detail.value.comment)
  if (fileList.value.length > 0) {
    fileList.value.forEach(item => {
      RequestData.append(orderpid.value+'[]', item.file)
    })
  }
  let result = await Api.OrderRate(RequestData);
  if (result.code == 1) {
    showSuccessToast({
      message: result.msg,
      onClose: function () {
        goBack()
      }
    });
  }else{
    showFailToast(result.msg);
  }
}
</script>

<style>
@import url("/assets/css/info.css");
</style>